<template>
    <h3 >标题：{{ msg }}</h3>
    <h5>数字计算：{{ num }}</h5>
    <p>姓名：{{uname }}</p>
    <p v-once>一次加载永不变：{{ uname }}</p>
    <button @click="onName">改变uname的名字</button>
    <hr>
    <!--对象类型读取-->
    <p>姓名：{{ obj.name }}</p>
    <p>年龄：{{ obj.age }}</p>
    <p>爱好：{{ obj.hobby }}</p>
    <p>{{ obj.age >= 18 ? '成年允许早恋':'未成年' }}</p>

    <xuanxs></xuanxs>
    
    </template>
    
<script>
import xuanxs from './xuanxs.vue';
export default {
    data() {
        return {
            msg: 'v-once只会在页面加载完成后执行一次',
            num: 2,
            uname: '萧炎',
            obj: {
                name: '美杜莎',
                age: 28,
                hobby: '萧炎'
            }
        }
    },
    // methods:是专门用来定义函数的
    methods: {
        //构建和编写函数 方法
        onName(){
            this.uname = '萧薰儿'
        }
    },
    components: {
        xuanxs,
       
    }
}

</script>